<!DOCTYPE html>
<html class="x-admin-sm">
<head>
    <meta charset="UTF-8">
    <title>员工列表</title>
   <#include "../head.ftl">
</head>
<body>
<div class="x-nav">
          <span class="layui-breadcrumb">
            <a href="">首页</a>
            <a href="">课程管理</a>
            <a>
              <cite>培训计划管理</cite></a>
          </span>
    <a class="layui-btn layui-btn-small" style="line-height:1.6em;margin-top:3px;float:right"
       onclick="location.reload()" title="刷新">
        <i class="layui-icon layui-icon-refresh" style="line-height:30px"></i></a>
</div>
<div class="layui-fluid">
    <div class="layui-row layui-col-space15">
        <div class="layui-col-md12">
            <div class="layui-card">
                <div class="layui-card-body ">
                    <table class="layui-table layui-form" id="planDataTable">
                        <thead>
                        <tr>
                            <th>id</th>
                            <th>计划名称</th>
                            <th>创建用户</th>
                            <th>课程</th>
                            <th>起始时间</th>
                            <th>结束时间</th>
                            <th>计划描述</th>
                            <th>状态</th>
                            <th>完成进度</th>
                            <th>创建时间</th>
                        </tr>
                        </thead>
                        <tbody>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>
</body>
<script>
    var userDT = $("#planDataTable").DataTable({
        "processing": true,//等待请求
        "serverSide": false,//开启服务器模式
        "lengthChange": false,//禁用显示改变每页数据条数控件
        "searching": false, //禁用搜索控件
        "ordering": false, //禁用排序功能
        "autoWidth": false,//自动宽度
        "pageLength": 10,
        "ajax": {
            "url": "${basePath}/plan/dataList"
        },
        "language": {
            "sSearch": "查询",
            "sZeroRecords": "没有找到记录",
            "sInfo": "显示第 _START_ 至 _END_ 项结果，共 _TOTAL_ 项",
            "sInfoEmpty": "无记录",
            "sInfoFiltered": "(从 _MAX_ 条记录过滤)",
            "sLoadingRecords": "载入中...",
            "oPaginate": {
                "sFirst": "首页",
                "sPrevious": "上一页",
                "sNext": "下一页",
                "sLast": "尾页"
            }
        },
        "columns": [
            {"data": "id"},
            {"data": "planName"},
            {"data": "creatUserName"},
            {"data": "courses"},
            {
                "data": "startTime", render: function (data, type, row, meta) {
                    return dateForamtToString(new Date(data), 'yyyy-MM-dd');
                }
            },
            {
                "data": "endTime", render: function (data, type, row, meta) {
                    return dateForamtToString(new Date(data), 'yyyy-MM-dd');
                }
            },
            {"data": "planDesc"},
            {
                "data": "status", render: function (data, type, row, meta) {
                    if (data == 1) {
                        return '<span class="layui-btn layui-btn-normal layui-btn-mini" onclick="updateStatus(this,' + row.id + ')" status="1" href="javascript:;">已启用</span>';
                    }
                    return '<span class="layui-btn layui-btn-normal layui-btn-mini layui-btn-disabled" onclick="updateStatus(this,' + row.id + ')" status="0" href="javascript:;" >已停用</span>';
                }
            },
            {
                "data": "finshSchedule", render: function (data, type, row, meta) {
                    return data + '%';
                }
            },
            {
                "data": "createTime", render: function (data, type, row, meta) {
                    return dateForamtToString(new Date(data), 'yyyy-MM-dd HH:mm:ss');
                }
            }
        ]
    });

    layui.use(['laydate', 'form'], function () {
        var laydate = layui.laydate;
        var form = layui.form;
        //执行一个laydate实例
        laydate.render({
            elem: '#start' //指定元素
        });

        //执行一个laydate实例
        laydate.render({
            elem: '#end' //指定元素
        });
    });

    function updateStatus(obj, id) {
        var status = $(obj).parents("td").find('span').attr("status");
        layer.confirm(status == 1 ? '确认要停用吗' : '确认要启用吗', function (index) {
            if (status == 1) {
                $(obj).parents("td").find('span').addClass('layui-btn-disabled').html('已停用');
                $(obj).parents("td").find('span').attr("status", 0);
                layer.msg('已停用!', {icon: 5, time: 1000});
            } else {
                $(obj).parents("td").find('span').removeClass('layui-btn-disabled').html('已启用');
                $(obj).parents("td").find('span').attr("status", 1);
                layer.msg('已启用!', {icon: 5, time: 1000});
            }
            $.get("${basePath}/plan/updateStatus?pid=" + id + "&status=" + (status == 1 ? 0 : 1));
        });
    }
</script>
<script>var _hmt = _hmt || [];
(function () {
    var hm = document.createElement("script");
    hm.src = "https://hm.baidu.com/hm.js?b393d153aeb26b46e9431fabaf0f6190";
    var s = document.getElementsByTagName("script")[0];
    s.parentNode.insertBefore(hm, s);
})();</script>
</html>